<template>
    <view class="addbox">
        <view class="top">
            <view class="name">地址簿</view>
            <view class="add" @click="topage('/pages/shop/addressFrom')">添加地址</view>
        </view>
        <view class="card" v-for="(i, index) in addresslsit" :key="addresslsit._id" @click="setAddress(i)">
            <view class="msg">
                <view class="fwb name">{{ i.name }},{{ i.phone }}</view>
                <view class="adress">{{ i.address }}{{ i.addressMsg }}</view>
            </view>
            <view class="">
                <view class="morenActive" v-if="i.moren">默认地址</view>
                <view class="moren" v-else @click.stop="toMoren(i)">设为默认</view>
                <view class="moren cr" @click.stop="editAddress(i._id)">修改</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const topage = (url) => {
    uni.navigateTo({
        url
    });
};
const addresslsit = ref([]);
const addressObj = uniCloud.importObject('mall-address');
//获取数据
const getData = async () => {
    let res = await addressObj.getList();
    addresslsit.value = res.data;
};
//设为默认
const toMoren = async (data) => {
    let res = await addressObj.updateMoren(data);
    getData();
};
//修改地址
const editAddress = async (_id) => {
    uni.navigateTo({
        url: './addressFrom?id=' + _id
    });
};
//设置地址
const setAddress = (item) => {
    uni.$emit('setAddress', item);
    uni.navigateBack();
};
onShow(() => {
    getData();
});
</script>

<style lang="scss">
.btn {
    font-weight: bold;
    // border: 1px solid #999;
    padding: 8rpx 15rpx;
    font-size: $uni-font-size-sm;
    @include flex-box-set();
}

.addbox {
    padding: 20rpx;
    font-size: $uni-font-size-paragraph;

    .top {
        @include flex-box();
        margin: 30rpx 0;

        .name {
            font-weight: bold;
        }

        .add {
            @extend .btn;
            border-radius: 20rpx;
        }
    }

    .card {
        margin: 20rpx;
        background-color: #fff;
        padding: 20rpx;
        @include flex-box();

        .msg {
            width: 70%;

            .name {
                @include ellipsis(1);
            }

            .adress {
                font-size: $uni-font-size-sm;
                @include ellipsis(1);
                color: #999;
            }
        }

        .moren {
            @extend .btn;
            border-radius: 10rpx;
        }

        .morenActive {
            @extend .moren;
            border: 1px solid red;
            color: red;
        }
    }
}
</style>
